<template>
    <div class="locationUsageRecord">
        <el-table v-loading="loading" :data="storeLcList">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="储位标识" align="center" prop="storeLocId" />
            <el-table-column label="储位编号" align="center" prop="storeLocNo" />
             <el-table-column label="储位名称" align="center" prop="storeLocName" />
            <el-table-column label="储位类型" align="center" prop="storeType">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.sl_store_type" :value="scope.row.storeType" />
              </template>
            </el-table-column>
            <el-table-column label="库房名称" align="center" prop="whName" min-width="180px" />
            <el-table-column label="库区名称" align="center" prop="whAreaname" min-width="110px" />
            <el-table-column label="存放区名称" align="center" prop="storeAreaName" min-width="100px" />
            <el-table-column label="储位状态" align="center" prop="statusCode">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.sl_status_code" :value="scope.row.statusCode" />
              </template>
            </el-table-column>
            <el-table-column label="管理单位" align="center" prop="deptNo" />
            <el-table-column label="存放设备类别" align="center" prop="equipTypeCode" min-width="110px">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.sl_equip_type_code" :value="scope.row.equipTypeCode" />
              </template>
            </el-table-column>
            <el-table-column label="可存放设备数量" align="center" prop="storeEquipNum" min-width="150px" />
            <el-table-column label="描述" align="center" prop="description" min-width="280px" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
                min-width="210px">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-s-fold"
                        @click="inTaskUsageRecord(scope.row)">入库使用记录</el-button>
                    <el-button size="mini" type="text" icon="el-icon-s-unfold"
                        @click="outTaskUsageRecord(scope.row)">出库使用记录</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />

        <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
            <el-table :data="inTaskList">
                <el-table-column label="入库任务编号" align="center" prop="inTaskNo" /> -->
                <el-table-column label="设备标识" align="center" prop="assetsId" />
                <el-table-column label="条形码" align="center" prop="rfidNo" min-width="165px" />
                <el-table-column label="类别" align="center" prop="sortCode">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.md_assets_category" :value="scope.row.sortCode" />
                    </template>
                </el-table-column>
                <el-table-column label="类型" align="center" prop="typeCode" min-width="120px" />
                <el-table-column label="库房" align="center" prop="whName" />
                <el-table-column label="库区" align="center" prop="whAreaName" />
                <el-table-column label="存放区" align="center" prop="storeAreaName" min-width="100px" />
                <el-table-column label="储位" align="center" prop="storeLocName" />
                <el-table-column label="是否完成" align="center" prop="isComplete">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.md_is_complete" :value="scope.row.isComplete" />
                    </template>
                </el-table-column>
                <el-table-column label="完成时间" align="center" prop="operationDate" min-width="130px">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.operationDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="num > 0" :total="num" :page.sync="queryParam.pageNum" :limit.sync="queryParam.pageSize"
                @pagination="inTaskUsageRecord" />
            <div slot="footer" class="dialog-footer">
                <el-button @click="open = false">返 回</el-button>
            </div>
        </el-dialog>

        <el-dialog :title="title" :visible.sync="opened" width="1200px" append-to-body>
            <el-table :data="outTaskList">
                <el-table-column label="入库任务编号" align="center" prop="inTaskNo" /> -->
                <el-table-column label="设备标识" align="center" prop="assetsId" />
                <el-table-column label="条形码" align="center" prop="rfidNo" min-width="165px" />
                <el-table-column label="类别" align="center" prop="sortCode">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.md_assets_category" :value="scope.row.sortCode" />
                    </template>
                </el-table-column>
                <el-table-column label="类型" align="center" prop="typeCode" min-width="120px" />
                <el-table-column label="库房" align="center" prop="whName" />
                <el-table-column label="库区" align="center" prop="whAreaName" />
                <el-table-column label="存放区" align="center" prop="storeAreaName" min-width="100px" />
                <el-table-column label="储位" align="center" prop="storeLocName" />
                <el-table-column label="是否完成" align="center" prop="isComplete">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.md_is_complete" :value="scope.row.isComplete" />
                    </template>
                </el-table-column>
                <el-table-column label="完成时间" align="center" prop="operationDate" min-width="130px">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.operationDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="num > 0" :total="num" :page.sync="queryParam.pageNum" :limit.sync="queryParam.pageSize"
                @pagination="outTaskUsageRecord" />
            <div slot="footer" class="dialog-footer">
                <el-button @click="opened = false">返 回</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listMdStockPosInfo } from "@/api/meter/mdStockPosInfo";
import { inTaskDetailsList, outTaskDetailsList } from "@/api/meter/detailsList"

export default {
    dicts: ['sl_store_type', 'sl_status_code', 'sl_equip_type_code', 'md_is_complete', 'md_assets_category'],
    data() {
        return {
            storeLcList: [],
            //遮罩层
            loading: true,
            //查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10
            },
            //总条数
            total: 0,
            //使用记录查询参数
            queryParam: {
                pageNum: 1,
                pageSize: 10
            },
            //弹出层标题
            title: "",
            //是否打开入库明细弹出层
            open: false,
            //是否打开出库明细弹出层
            opened: false,
            //入库明细列表
            inTaskList: [],
            //出库明细列表
            outTaskList: [],
            //明细条数
            num: 0
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        getList() {
            this.loading = true
            listMdStockPosInfo(this.queryParams).then(response => {
                this.storeLcList = response.rows
                this.total = response.total
                this.loading = false
            })
        },
        //入库使用记录
        inTaskUsageRecord(row) {
            let storeLocId = row.storeLocId
            this.queryParam.storeLocId = storeLocId
            inTaskDetailsList(this.queryParam).then(response => {
                this.inTaskList = response.rows
                this.num = response.total
                this.title = "入库使用记录"
                this.open = true
            })
        },
        //出库使用记录
        outTaskUsageRecord(row) {
            let storeLocId = row.storeLocId
            this.queryParam.storeLocId = storeLocId
            outTaskDetailsList(this.queryParam).then(response => {
                this.outTaskList = response.rows
                this.num = response.total
                this.title = "出库使用记录"
                this.opened = true
            })
        }
    }
}
</script>

<style scoped></style>

